<template>
    <div class="container">
        <!-- 顶部 -->
        <tab-head></tab-head>
        <!-- 内容 -->
        <van-tabs v-model:active="active" type="card" class="dataClass" title-active-color="#fff"
            @click-tab="onClickTab">
            <van-tab v-for="item in tabList" :key="item.id" :title="item.title"
                title-style="font-size: 16px; font-weight: 600;">
                <template #title style="height: 100%;">
                    <img :src="active == item.id ? item.activeIcon : item.icon" style="width: 48px;height: 66px;" alt=""
                        srcset="" />
                </template>
                <dangerousProject v-if="active == 0"></dangerousProject>
                <environmental v-if="active == 1"></environmental>
                <monitoring v-if="active == 2"></monitoring>
                <excavation v-if="active == 3"></excavation>
                <topPipe v-if="active == 4"></topPipe>
                <repair v-if="active == 5"></repair>
                <shieldTunneling v-if="active == 6"></shieldTunneling>
            </van-tab>
        </van-tabs>
        <!-- 底部导航 -->
        <tab-bar></tab-bar>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useAppStore } from "@/store";
import dangerousProject from "./dangerousProject/index.vue";
import environmental from "./environmental/index.vue";
import monitoring from "./monitoring/index.vue";
import excavation from "./excavation/index.vue";
import topPipe from "./topPipe/index.vue";
import repair from "./repair/index.vue";
import shieldTunneling from "./shieldTunneling/index.vue";
export default defineComponent({
    components: {
        dangerousProject,
        environmental,
        monitoring,
        excavation,
        topPipe,
        repair,
        shieldTunneling,
    },
    setup() {
        const appStore = useAppStore();

        const active = ref(appStore.CworkbenchIndex);
        const tabList = ref([
            {
                id: 0,
                title: '危大工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/危大工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/危大工程.png", import.meta.url).href,
            },
            {
                id: 1,
                title: '环境监测',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/环境监测-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/环境监测.png", import.meta.url).href,
            },
            {
                id: 2,
                title: '智能监控',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/智能监控-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/智能监控.png", import.meta.url).href,
            },
            {
                id: 3,
                title: '基坑监测',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/基坑监测-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/基坑监测.png", import.meta.url).href,
            },
            {
                id: 4,
                title: '顶管工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/顶管工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/顶管工程.png", import.meta.url).href,
            },
            {
                id: 5,
                title: '修复工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/修复工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/修复工程.png", import.meta.url).href,
            },
            {
                id: 6,
                title: '盾构工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/盾构工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/盾构工程.png", import.meta.url).href,
            }
        ]);
        const onClickTab = ({ name, title, }) => {
            appStore.setCworkbenchIndex(name)
        };
        onMounted(() => {
            if (appStore.projectInfo.professionalModules) {
                if (!(appStore.projectInfo.professionalModules.includes('1'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 3);
                }
                if (!(appStore.projectInfo.professionalModules.includes('2'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 4);
                }
                if (!(appStore.projectInfo.professionalModules.includes('3'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 5);
                }
                if (!(appStore.projectInfo.professionalModules.includes('4'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 6);
                }
            } else {
                tabList.value.splice(-4);
            }
        });


        return {
            active,
            tabList,
            onClickTab,
        };
    },
});
</script>

<style lang="less" scoped>
.container {
    height: 100%;
    width: 100%;
}

.dataClass {
    margin: 2%;
    height: 79%;
    color: #fff;
    background-color: rgba(33, 46, 90, 0);
    --van-tabs-card-height: 144px;

    :deep(.van-tabs__wrap) {
        background-color: rgba(33, 46, 90, 0.5);
        margin: 4px 0;
    }

    :deep(.van-tabs__content) {
        height: 95%;
    }

    :deep(.van-tab__panel, .van-tab__panel-wrapper) {
        height: 100%;
    }

    :deep(.van-tabs__nav) {
        background: none;
    }

    :deep(.van-tabs__nav--card) {
        margin: 0;
        border: none;
    }

    :deep(.van-tab--card) {
        border-right: none;
    }

    :deep(.van-tab--card.van-tab--active) {
        background-color: rgba(33, 46, 90, 0);
    }

    .MainClass {
        margin: 15px;
        font-size: 28px;
        height: 100%;
    }
}
</style>